:root {
  --text-secondary-color: #91B9CD
  --active-color: #20A5D6
  --primary-background-color: black
  --ui-border-color-dark: #3C5D80
  --sidebar-transition: all 0.3s ease
}

// .ThumbnailEntry.active .ImageThumbnail
//   border-color: var(--active-color)
//   transition: var(--sidebar-transition)

.image-thumbnail
  position: relative
  width: 100%
  background-color: var(--primary-background-color)
  // border: 1px solid var(--ui-border-color-dark)
  height: 100px
  margin: 0 auto
  padding 0
  position: relative
  transition: var(--sidebar-transition)
  -moz-background-clip: padding
  -webkit-background-clip: padding
  background-clip: padding-box

  .image-thumbnail-loading-indicator
    position: absolute
    left: 50%
    top: 50%
    margin: -22px 0 0 -22px
    display: block
    width: 44px
    height: 44px

    &:after
      content: " "
      display: block
      width: 32px
      height: 32px
      margin: 1px
      border-radius: 50%
      border: 5px solid var(--ui-border-color-dark)
      border-color: var(--ui-border-color-dark) transparent var(--ui-border-color-dark) transparent
      animation: image-thumbnail-loading-indicator 1.2s linear infinite

    @keyframes image-thumbnail-loading-indicator
      0%
        transform: rotate(0deg)
      100%
        transform: rotate(360deg)

  .image-thumbnail-canvas
    height: 100%
    width: 126px
    overflow: hidden
    display: flex
    justify-content: center

    img
      -webkit-user-drag: none
      pointer-events: none

  .image-thumbnail-progress
    position: absolute
    left: 0
    bottom: -5px
    width: 100%
    height: 3px
    padding: 0 4px
    border-radius: 4px

    &-bar
      width: 100%
      height: 100%
      background: #282E4E
      border-radius: 3px

      &-inner
        width: 0
        height: 100%
        border-radius: 3px
        // background-color: var(--active-color)
        background: #2EB4B5
        will-change: auto

        &.complete
          background: #B8C6FF
